<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p{
            text-align: center; /* 文本居中 */
        }
        .box1{
            width: 500px;
            height: 33px;
            border-bottom: 1px solid #ccc;
            margin:  20px auto;
        }
        .box1 input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none; /* 文本框去边框 */
        }
        .box2{
            position: relative;/* 绝对定位参照物 */
            width: 500px;
            height: 33px;
            border-bottom: 1px solid #ccc;
            margin:  20px auto;
        }
        .box2 input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none; /* 文本框去边框 */
        }
        .box2 img{
            position: absolute;/* 绝对定位 */
            top: 2px;
            right: 100px;
            width: 24px;
        }
        .box2 span{
            position: absolute;/* 绝对定位 */
            top: 2px;
            right: 2px;
            width: 80px;
        }
        .box2 span a{
            text-decoration: none;
            color: black;
        }
        .box2 span a:hover{
            color: cornflowerblue;
        }
        .box3{
            width: 500px;
            height: 33px;
            /* line-height: 33px; */
            background: red;
            margin: 10px auto;
            border-radius: 10px;
            /* color: #ffffff; */
            text-align: center;
        }
        .box3 button{
            width: 500px;
            height: 33px;
            line-height: 33px;
            background: red;
            color: #ffffff;
            border-radius: 10px;
            /* 消除button的默认样式 */
            border:0;  /* 清除边框 */
            outline: none;    /* 消除默认点击蓝色边框效果 */
        }
    </style>
</head>
<body>
    <p class="p">京东登入</p>
    <div class="box1">
        <input type="text" name="" id="">
    </div>
    <div class="box2">
        <label for="">
            <img src="images/隐藏.png" alt="" id="eye">
            <span>| <a href="#">忘记密码</a> </span>
        </label>
        <input type="password" name="" id="pwd">
        <script>
            // 1. 获取元素
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');
            // 2. 注册事件 处理程序
            var flag = 0; // 初始化 0
            eye.onclick = function(){
                // 点击一次之后 flag 一定要变化
                if(flag == 0){ // flag = 0 满足进入if表达式
                    pwd.type = 'text';
                    eye.src = 'images/看见.png';
                    flag = 1; // 退出程序之后， 此时flag = 1 第二个进入程序flag = 1 不满足if条件 进入else
                }else{
                    pwd.type = 'password';
                    eye.src = 'images/隐藏.png';
                    flag = 0; // 退出程序之后，flag = 0 下次进入程序 flag = 0 满足if条件 
                }
            }
        </script>
    </div>
    <div class="box3"><button>登入</button></div>
</body>
</html>